<template>
  <div id ="circleContent" class="circle-detail-container">
        <div :key= moment.id  v-for="moment in circleMoment" class="user-circle-content">
            <div class="left">
                <p>
                   <img style="width:50px;height:50px;" src= "http://vsktest.virsical.cn/res/vsktest.com/visitor/ada94eab12361ab073616f61d54214db.jpg"/>
                </p>
                <p>
                    {{ moment.userName }}
                </p>
            </div>
            <div class="right">
                <p>
                    {{ moment.content }}
                </p>
                <p>
                    <img style="width:80px;height:80px;" src= "http://vsktest.virsical.cn/res/vsktest.com/visitor/ada94eab12361ab073616f61d54214db.jpg"/>
                    <img style="width:80px;height:80px;" src= "http://vsktest.virsical.cn/res/vsktest.com/visitor/ada94eab12361ab073616f61d54214db.jpg"/>
                    <img style="width:80px;height:80px;" src= "http://vsktest.virsical.cn/res/vsktest.com/visitor/ada94eab12361ab073616f61d54214db.jpg"/>
                    <img style="width:80px;height:80px;" src= "http://vsktest.virsical.cn/res/vsktest.com/visitor/ada94eab12361ab073616f61d54214db.jpg"/>
                    <img style="width:80px;height:80px;" src= "http://vsktest.virsical.cn/res/vsktest.com/visitor/ada94eab12361ab073616f61d54214db.jpg"/>
                </P>
                <p style="background-color:#d8d8d8">
                    
                </p>
            </div>
        </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  computed:{
     ...mapGetters({
         circleMoment: 'getCircleMoment'
     })
  },
  created(){
      this.$store.dispatch('getCircleMoment')
  }
}
</script>
<style scoped>
    .circle-detail-container{
        height: 100%;
        border-left: 1px solid #ddd;
        padding-left:5px;
        padding-right:5px;
        overflow: auto;
    }
    .user-circle-content{
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
    }

     .user-circle-content .left {
        border-right: 1px solid #ddd;
        width: 20%;
     }
    .user-circle-content .right{
      flex: 1;
      padding: 10px;
    }
     .left p{
        width: 100%;
        text-align: center;
     }

    .right p{
        width: 100%;
        text-align: left;
     }
    
</style>
